<template>
	<view>
		<!-- 智能咨询 -->
		<movable-area class="movable-area">
			<movable-view class="movable-view" :x="x" :y="y" direction="all">
				<view class="znzx" v-if="znzxShow">
					<view style="height: 50rpx;width: 130rpx;">
						<view class="znzxGb" @click="znzxClose">×</view>
					</view>
					<view class="znzxIcon" @click="znzxClick">
						<text class="iconfont icon-caidan"></text>
					</view>
					<uni-transition custom-class="custom-transition" :mode-class="['fade','slide-top']"
						:show="znzxIconItemShow">
						<view class="znzxIconItem" @click="goZnzx">
							<view>
								<text class="iconfont icon-tubiaozhizuomoban-"></text>
							</view>
							<view>
								<text class="znzxIconText">智能咨询</text>
							</view>
						</view>
					</uni-transition>
				</view>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	export default {
		name: "znzx",
		data() {
			return {
				x: "620rpx",
				y: "1000rpx",
				znzxShow: true,
				znzxIconItemShow: false,
			};
		},
		props: {
			openId: {
				type: String,
				default: ""
			},
		},
		methods: {
			// 智能咨询关闭
			znzxClose() {
				this.znzxShow = false
			},
			// 智能咨询展开
			znzxClick() {
				this.znzxIconItemShow = !this.znzxIconItemShow
			},
			// 跳转智能咨询
			goZnzx() {
				uni.navigateTo({
					url:"/pages/znzx/index?openId="+this.openId
				})
			}
		}
	}
</script>

<style>
	.movable-area {
		height: 100vh;
		width: 100%;
		top: 0;
		position: fixed;
		pointer-events: none; //此处要加，鼠标事件可以渗透
		padding: 0;
		z-index:1000
	}

	.movable-view {
		width: 100rpx;
		height: 100rpx;
		pointer-events: auto; //恢复鼠标事
	}

	.znzx {
		position: relative;
	}

	.znzxGb {
		background: #3333339c;
		width: 40rpx;
		height: 40rpx;
		color: #ffffff;
		text-align: center;
		line-height: 40rpx;
		font-size: 44rpx;
		border-radius: 20rpx;
		float: right;
	}

	.znzxIcon {
		z-index: 100;
		background-image: linear-gradient(#3D96FE, #0C64FE);
		width: 114rpx;
		height: 114rpx;
		line-height: 114rpx;
		text-align: center;
		border-radius: 50%;
	}

	.znzxIcon>.iconfont {
		color: #fff;
		text-align: center;
		position: static;
		font-size: 60rpx;
	}

	.custom-transition {
		position: absolute;
		width: 100rpx;
		height: 100rpx;
		top: 190rpx;
	}

	.znzxIconItem {
		width: 108rpx;
		height: 108rpx;
		background-image: linear-gradient(#fff, #fff);
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-shadow: 0 0 8rpx 0 rgba(1, 15, 23, 0.06);
	}

	.znzxIconItem>view {
		display: flex;
	}

	.znzxIconItem .iconfont {
		color: #3077FF;
		font-size: 55rpx;
		text-align: center;
		position: static;
	}

	.znzxIconText {
		font-size: 18rpx;
		color: #3077FF;
	}
</style>